<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- Favicon -->
      <link rel="shortcut icon"  th:href="@{/xray/images/favicon.ico}"/>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet"  th:href="@{/xray/css/bootstrap.min.css}">
      <!-- Typography CSS -->
      <link rel="stylesheet"  th:href="@{/xray/css/typography.css}">
      <!-- Style CSS -->
      <link rel="stylesheet" th:href="@{/xray/css/style.css}">
      <!-- Responsive CSS -->
      <link rel="stylesheet"  th:href="@{/xray/css/responsive.css}">

      <!-- 引入 echarts.js -->
      <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
      <script src="xray/js/jquery.min.js"></script>

      <style>
         .my-mouse-img {
            position: absolute;
            z-index: 999;
         }
      </style>

   </head>


   <body>
   <!--鼠标图案-->
   <img class="my-mouse-img" src="imgs/mouse-logo.jpg" alt="" width="60px">
   <script>
      document.addEventListener('mousemove', function (e) {
         //鼠标只要移动,就会触发事件
         var x = e.pageX;
         var y = e.pageY;
         var pic = document.querySelector('img');
         pic.style.left = x-20+'px';
         pic.style.top = y-40+'px';
      })
   </script>

   <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div class="wrapper">
         <!-- Sidebar  -->
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="/agency-chart">
               <img src="xray/images/logo.png" class="img-fluid" alt="">
               <span>XRay</span>
               </a>
               <div class="iq-menu-bt-sidebar">
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
               </div>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">
                     <li>
                        <a href="/agency-chart" class="iq-waves-effect"><i class="ri-hospital-fill"></i><span>首页图表</span></a>
                     </li>
                     <li>
                        <a href="/map" class="iq-waves-effect"><i class="ri-hospital-fill"></i><span>搜索定位</span></a>
                     </li>                     
                     <li>
                        <a href="/agency-table" class="iq-waves-effect"><i class="ri-home-8-fill"></i><span>查看所有机构</span></a>
                     </li>
                     <li>
                        <a href="/report" class="iq-waves-effect"><i class="ri-briefcase-4-fill"></i><span>民意调查</span></a>
                     </li>
                     <li>
                        <a href="/personcenter" class="iq-waves-effect"><i class="ri-group-fill"></i><span>个人中心</span></a>
                     </li>
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>

         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
            <div class="iq-top-navbar">
               <div class="iq-navbar-custom">
                  <div class="iq-sidebar-logo">
                     <div class="top-logo">
                        <a href="/agency-chart" class="logo">
                        <img src="xray/images/logo.png" class="img-fluid" alt="">
                        <span>XRay</span>
                        </a>
                     </div>
                  </div>
                  <nav class="navbar navbar-expand-lg navbar-light p-0">
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                     <i class="ri-menu-3-line"></i>
                     </button>
                     <div class="iq-menu-bt align-self-center">
                        <div class="wrapper-menu">
                           <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                        </div>
                     </div>
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list">
                           <li class="nav-item">
                              <a class="search-toggle iq-waves-effect language-title" href="#"><img src="xray/images/small/flag-01.png" alt="img-flaf" class="img-fluid mr-1" style="height: 16px; width: 16px;" /> English <i class="ri-arrow-down-s-line"></i></a>
                              <div class="iq-sub-dropdown">
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-02.png" alt="img-flaf" class="img-fluid mr-2" />French</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-03.png" alt="img-flaf" class="img-fluid mr-2" />Spanish</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-04.png" alt="img-flaf" class="img-fluid mr-2" />Italian</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-05.png" alt="img-flaf" class="img-fluid mr-2" />German</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-06.png" alt="img-flaf" class="img-fluid mr-2" />Japanese</a>
                              </div>
                           </li>
                           <li class="nav-item iq-full-screen">
                              <a href="#" class="iq-waves-effect" id="btnFullscreen"><i class="ri-fullscreen-line"></i></a>
                           </li>
                           <li class="nav-item">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                              <div class="iq-sub-dropdown">
                                 <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                       <div class="bg-primary p-3">
                                          <h5 class="mb-0 text-white">All Notifications<small class="badge  badge-light float-right pt-1">4</small></h5>
                                       </div>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/01.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Emma Watson Bini</h6>
                                                <small class="float-right font-size-12">Just Now</small>
                                                <p class="mb-0">95 MB</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/02.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">New customer is join</h6>
                                                <small class="float-right font-size-12">5 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/03.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Two customer is left</h6>
                                                <small class="float-right font-size-12">2 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/04.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">New Mail from Fenny</h6>
                                                <small class="float-right font-size-12">3 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                           <li class="nav-item dropdown">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-mail-open-fill"></i>
                                 <span class="bg-primary count-mail"></span>
                              </a>
                              <div class="iq-sub-dropdown">
                                 <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                       <div class="bg-primary p-3">
                                          <h5 class="mb-0 text-white">All Messages<small class="badge  badge-light float-right pt-1">5</small></h5>
                                       </div>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/01.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Bini Emma Watson</h6>
                                                <small class="float-left font-size-12">13 Jun</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/02.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Lorem Ipsum Watson</h6>
                                                <small class="float-left font-size-12">20 Apr</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/03.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Why do we use it?</h6>
                                                <small class="float-left font-size-12">30 Jun</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/04.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Variations Passages</h6>
                                                <small class="float-left font-size-12">12 Sep</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/05.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Lorem Ipsum generators</h6>
                                                <small class="float-left font-size-12">5 Dec</small>
                                             </div>
                                          </div>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <ul class="navbar-list">
                        <li>
                           <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                              <img src="xray/images/user/1.jpg" class="img-fluid rounded mr-3" alt="user">
                              <div class="caption">
                                 <h6 class="mb-0 line-height" th:text="${myname}"></h6>
                              </div>
                           </a>
                           <div class="iq-sub-dropdown iq-user-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="d-inline-block w-100 text-center p-3">
                                       <a class="bg-primary iq-sign-btn" href="/signin" role="button">Sign out<i class="ri-login-box-line ml-2"></i></a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </nav>
               </div>
            </div>
            <!-- TOP Nav Bar END -->


            <div class="container-fluid">
               <div class="row">

                  <div class="col-lg-12">
                     <div class="row">
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-primary rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-primary"><i class="ri-user-fill"></i></div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter" th:text="${smallNumber}"></span></h2>
                                       <h5 class="">幼儿园</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-warning rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-warning"><i class="ri-women-fill"></i></div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter" th:text="${middleNumber}"></span></h2>
                                       <h5 class="">中小学</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-danger rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-danger"><i class="ri-group-fill"></i></div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter" th:text="${collegeNumber}"></span></h2>
                                       <h5 class="">大学</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                           <div class="iq-card">
                              <div class="iq-card-body iq-bg-info rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-info"><i class="ri-hospital-line"></i></div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter" th:text="${otherNumber}"></span></h2>
                                       <h5 class="">校外培训机构</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>

                  <!--机构类型扇形图-->
                  <div class="col-sm-12 col-lg-6">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Agency Type PieChart</h4>
                           </div>
                        </div>


                        <div id="typePieChart" class="iq-card-body" style="width: 700px;height:400px;"> </div>
                        <script type="text/javascript">
                           $(document).ready(function(){
                              // 基于准备好的dom，初始化echarts实例
                              var myChart = echarts.init(document.getElementById('typePieChart'));
                              //数据加载完之前先显示一段简单的loading动画
                              myChart.showLoading();
                              var type=[];
                              var number=[];
                              var datas=[];

                              $.ajax({
                                 type : "post",
                                 async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                                 url : "/agency-chart-typedata",    //请求发送到dataActiont处
                                 data : {},
                                 dataType : "json",        //返回数据形式为json
                                 success : function(result) {
                                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                                    if (result) {
                                       for (var i = 0; i < result.length; i++) {
                                          var sum = new Object();
                                          var n=new String();
                                          n=result[i].type;

                                          if(n=="small"){
                                             type.push("幼儿园");
                                          }
                                          if(n=="middle"){
                                             type.push("中小学");
                                          }
                                          if(n=="college"){
                                             type.push("大学");
                                          }
                                          if(n=="other"){
                                             type.push("校外培训机构");
                                          }
                                          number.push(result[i].number);
                                          sum.name = type[i];
                                          sum.value = result[i].number;

                                          datas[i] = sum;

                                       }
                                       myChart.hideLoading();    //隐藏加载动画
                                       myChart.setOption({        //加载数据图表
                                          title: {
                                             text: '机构种类数量',
                                             subtext: '',
                                             x: 'center'
                                          },
                                          tooltip: {
                                             trigger: 'item',
                                             formatter: "{a} <br/>{b} : {c} ({d}%)"
                                          },
                                          legend: {
                                             orient: 'vertical',
                                             left: 'left',
                                             data: type
                                          },
                                          series: [{
                                             // 根据名字对应到相应的系列
                                             name: '机构类型',//薪资 series not exists. Legend data should be same with series name or data name.
                                             type: 'pie',
                                             radius: '55%',
                                             center: ['50%', '60%'],
                                             avoidLabelOverlap: false,
                                             data: datas,
                                             itemStyle: {
                                                emphasis: {
                                                   shadowBlur: 10,
                                                   shadowOffsetX: 0,
                                                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                },
                                                normal: {
                                                   color: function (params) {
                                                      //自定义颜色
                                                      var colorList = [
                                                         '#F26361', '#089BAB', '#FC9F5B', '#88E0E0',];
                                                      return colorList[params.dataIndex]
                                                   }
                                                }
                                             }
                                          }],
                                       })
                                    }
                                 },
                                 error : function(errorMsg) {
                                    //请求失败时执行该函数
                                    alert("图表请求数据失败!");
                                    myChart.hideLoading();
                                 }
                              });//end ajax
                           });
                        </script>


                     </div>
                  </div>

                  <!--机构盈利情况扇形图-->
                  <div class="col-sm-12 col-lg-6">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Agency Income PieChart</h4>
                           </div>
                        </div>


                        <div id="incomePieChart" class="iq-card-body" style="width: 700px;height:400px;"> </div>
                        <script type="text/javascript">
                           $(document).ready(function(){
                              // 基于准备好的dom，初始化echarts实例
                              var myChart = echarts.init(document.getElementById('incomePieChart'));
                              //数据加载完之前先显示一段简单的loading动画
                              myChart.showLoading();
                              var income=[];
                              var number=[];
                              var datas=[];
                              $.ajax({
                                 type : "post",
                                 async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                                 url : "/agency-chart-incomedata",    //请求发送到dataActiont处
                                 data : {},
                                 dataType : "json",        //返回数据形式为json
                                 success : function(result) {
                                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                                    if (result) {
                                       for(var i=0;i<result.length;i++){
                                          var sum = new Object();
                                          var n=new String();
                                          n=result[i].income;
                                          if(n=="是"){
                                             income.push("营利性");
                                          }if(n=="否"){
                                             income.push("非营利性");
                                          }
                                          number.push(result[i].number);
                                          sum.name=income[i];
                                          sum.value=result[i].number;
                                          datas[i]=sum;
                                       }
                                       myChart.hideLoading();    //隐藏加载动画
                                       myChart.setOption({        //加载数据图表
                                          title: {
                                             text: '机构盈利类型数量',
                                             subtext: '',
                                             x:'center'
                                          },
                                          tooltip: {
                                             trigger: 'item',
                                             formatter: "{a} <br/>{b} : {c} ({d}%)"
                                          },
                                          legend: {
                                             orient: 'vertical',
                                             left: 'left',
                                             data: income
                                          },
                                          series: [{
                                             // 根据名字对应到相应的系列
                                             name: '机构盈利类型',//薪资 series not exists. Legend data should be same with series name or data name.
                                             type: 'pie',
                                             radius : '55%',
                                             center: ['50%', '60%'],
                                             avoidLabelOverlap: false,
                                             data: datas,
                                             itemStyle: {
                                                emphasis: {
                                                   shadowBlur: 10,
                                                   shadowOffsetX: 0,
                                                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                },
                                                normal:{
                                                   color:function(params) {
                                                      //自定义颜色
                                                      var colorList = [
                                                         '#089BAB', '#FC9F5B'];
                                                      return colorList[params.dataIndex]
                                                   }
                                                }
                                             }
                                          }],
                                       })
                                    }
                                 },
                                 error : function(errorMsg) {
                                    //请求失败时执行该函数
                                    alert("图表请求数据失败!");
                                    myChart.hideLoading();
                                 }
                              });//end ajax
                           });
                        </script>
                     </div>
                  </div>

                  <!--机构今年各月份新增数量折线图-->
                  <div class="col-sm-12 col-lg-6">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Agency 2022 Month Increase LineChart</h4>
                           </div>
                        </div>
                        <div id="lineChart" class="iq-card-body" style="width: 600px;height:400px;"> </div>

                        <script type="text/javascript">
                           $(document).ready(function(){
                              // 基于准备好的dom，初始化echarts实例
                              var myChart = echarts.init(document.getElementById('lineChart'));
                              //数据加载完之前先显示一段简单的loading动画
                              myChart.showLoading();
                              var name=[];
                              var value=[];

                              $.ajax({
                                 type : "post",
                                 async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                                 url : "/agency-chart-monthdata",    //请求发送到dataActiont处
                                 data : {},
                                 dataType : "json",        //返回数据形式为json
                                 success : function(result) {
                                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                                    if (result) {
                                       for (var i = 0; i < result.length; i++) {
                                          name.push(result[i].month);
                                          value.push(result[i].number);
                                       }
                                       myChart.hideLoading();    //隐藏加载动画
                                       myChart.setOption({        //加载数据图表
                                          title: {
                                             text: '今年各月份机构新增数量',
                                             subtext: '',
                                             x: 'center'
                                          },
                                          tooltip: {
                                             trigger: 'axis',
                                          },
                                          legend: {
                                             orient: 'vertical',
                                             left: 'left',
                                             data: ['新增机构数量']
                                          },
                                          xAxis: {
                                             type: 'category',
                                             data: name,
                                             name:'月份',
                                             axisLine: {
                                                lineStyle: {
                                                   color: '#089BAB'
                                                }
                                             },
                                             axisLabel: {
                                                interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                                             },
                                          },
                                          yAxis: {
                                             type: 'value',
                                             axisLabel : {
                                                formatter: '{value} 个'
                                             },
                                             axisLine: {
                                                lineStyle: {
                                                   color: '#089BAB'
                                                }
                                             },
                                             min:0, // 设置y轴刻度的最小值
                                             splitNumber:2,  // 设置y轴刻度间隔个数
                                          },
                                          series: [{
                                             // 根据名字对应到相应的系列
                                             name: '新增机构数量',
                                             type: 'line',
                                             avoidLabelOverlap: false,
                                             data: value,
                                             color:['#F26361'],
                                             markPoint : {
                                                data : [
                                                   {type : 'max', name: '最大值'},
                                                   {type : 'min', name: '最小值'}
                                                ]
                                             },
                                          }],
                                       })
                                    }
                                 },
                                 error : function(errorMsg) {
                                    //请求失败时执行该函数
                                    alert("图表请求数据失败!");
                                    myChart.hideLoading();
                                 }
                              });//end ajax
                           });
                        </script>


                     </div>
                  </div>

                  <!--机构今年各月份新增数量柱形图-->
                  <div class="col-sm-12 col-lg-6">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Agency 2022 Month Increase LineChart</h4>
                           </div>
                        </div>

                        <div id="barChart" class="iq-card-body" style="width: 600px;height:400px;"> </div>
                        <script type="text/javascript">
                           $(document).ready(function(){
                              // 基于准备好的dom，初始化echarts实例
                              var myChart = echarts.init(document.getElementById('barChart'));
                              //数据加载完之前先显示一段简单的loading动画
                              myChart.showLoading();
                              var name=[];
                              var value=[];

                              $.ajax({
                                 type : "post",
                                 async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                                 url : "/agency-chart-monthdata",    //请求发送到dataActiont处
                                 data : {},
                                 dataType : "json",        //返回数据形式为json
                                 success : function(result) {
                                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                                    if (result) {
                                       for (var i = 0; i < result.length; i++) {
                                          name.push(result[i].month);
                                          value.push(result[i].number);
                                       }
                                       myChart.hideLoading();    //隐藏加载动画
                                       myChart.setOption({        //加载数据图表
                                          title: {
                                             text: '今年各月份机构新增数量',
                                             subtext: '',
                                             x: 'center'
                                          },
                                          tooltip: {
                                             trigger: 'axis',
                                          },
                                          legend: {
                                             orient: 'vertical',
                                             left: 'left',
                                             data: ['新增机构数量']
                                          },
                                          xAxis: {
                                             type: 'category',
                                             data: name,
                                             name:'月份',
                                             axisLine: {
                                                lineStyle: {
                                                   color: '#000000'
                                                }
                                             },
                                             axisLabel: {
                                                interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                                             },
                                          },
                                          yAxis: {
                                             type: 'value',
                                             axisLabel : {
                                                formatter: '{value} 个'
                                             },
                                             axisLine: {
                                                lineStyle: {
                                                   color: '#000000'
                                                }
                                             },
                                             min:0, // 设置y轴刻度的最小值
                                             splitNumber:2,  // 设置y轴刻度间隔个数
                                          },
                                          series: [{
                                             // 根据名字对应到相应的系列
                                             name: '新增机构数量',
                                             type: 'bar',
                                             avoidLabelOverlap: false,
                                             data: value,
                                             itemStyle:{
                                                normal:{
                                                   //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                                   color: function (params){
                                                      /*var colorList = ['#F26361', '#089BAB', '#FC9F5B', '#88E0E0'];*/
                                                      var colorList = ['#32cd32','#3685fe','#9977ef','#009db2',
                                                                        '#f5616f', '#f7b13f','#adff2f','#ffff00',
                                                                        '#f47a75','#009db2','#00bfff','#9977ef'];
                                                      return colorList[params.dataIndex];
                                                   }
                                                },
                                                //鼠标悬停时：
                                                emphasis: {
                                                   shadowBlur: 10,
                                                   shadowOffsetX: 0,
                                                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                },
                                             }

                                          }],
                                       })
                                    }
                                 },
                                 error : function(errorMsg) {
                                    //请求失败时执行该函数
                                    alert("图表请求数据失败!");
                                    myChart.hideLoading();
                                 }
                              });//end ajax
                           });
                        </script>


                     </div>
                  </div>

               </div>
            </div>








            <!-- Footer -->
            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                           <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        Copyright 2020  All Rights Reserved.
                     </div>
                  </div>
               </div>
            </footer>
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Footer END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="xray/js/jquery.min.js"></script>
      <script src="xray/js/popper.min.js"></script>
      <script src="xray/js/bootstrap.min.js"></script>
      <!-- Appear JavaScript -->
      <script src="xray/js/jquery.appear.js"></script>
      <!-- Countdown JavaScript -->
      <script src="xray/js/countdown.min.js"></script>
      <!-- Counterup JavaScript -->
      <script src="xray/js/waypoints.min.js"></script>
      <script src="xray/js/jquery.counterup.min.js"></script>
      <!-- Wow JavaScript -->
      <script src="xray/js/wow.min.js"></script>
      <!-- Apexcharts JavaScript -->
      <script src="xray/js/apexcharts.js"></script>
      <!-- Slick JavaScript -->
      <script src="xray/js/slick.min.js"></script>
      <!-- Select2 JavaScript -->
      <script src="xray/js/select2.min.js"></script>
      <!-- Owl Carousel JavaScript -->
      <script src="xray/js/owl.carousel.min.js"></script>
      <!-- Magnific Popup JavaScript -->
      <script src="xray/js/jquery.magnific-popup.min.js"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script src="xray/js/smooth-scrollbar.js"></script>
      <!-- lottie JavaScript -->
      <script src="xray/js/lottie.js"></script>
      <!-- Raphael-min JavaScript -->
      <script src="xray/js/raphael-min.js"></script>
      <!-- Morris JavaScript -->
      <script src="xray/js/morris.js"></script>
      <!-- Morris min JavaScript -->
      <script src="xray/js/morris.min.js"></script>
      <!-- Chart Custom JavaScript -->
      <script src="xray/js/chart-custom.js"></script>
      <!-- Custom JavaScript -->
      <script src="xray/js/custom.js"></script>

   </body>
</html>